<script setup>
import data from '../data/data.json';  
import {ref , defineEmits} from 'vue';


const textAll = ref(data.products)
console.log(data);
// console.log(textAll);
// // fetch('../data.data.json').then(res=>{console.log(res);})
    // 搜索
const findText = (e) => {

  let txt = e.target.value; //输入框的实时数据
  console.log(txt);
  if (txt === '') { //
    textAll.value = data.products; // 如果输入框为空，返回全部数据
  } else {
    let dataCheck = data.products.filter(v => v['p-name'].includes(txt));
    textAll.value = dataCheck; //否则返回过滤的数据
  }
}
// findText();
 
// 给父组件传值
const emits = defineEmits();

//打钩
    const checkInput = (e)=>{
        let id = e.target.id
         textAll.value.forEach(v=>{
            if (v.id ==id ){
                v.onSale.value = !v.onSale.value;
            }
        })
        //数组的选项改变
        console.log(textAll.value);
        //传给父级,在传给右边 ....
        emits('upupDate',textAll.value)
    }


</script>
<template>
        <div class="L">
            
            <input type="text" placeholder="查询的内容" @input="findText"  >
            <ul>
            <li v-for="item in textAll">
            <label>
        <input type="checkbox" name="" :id="item._id" v-model="item.onSale" :key="item._id" @change="checkInput">
               <span>
                {{ item['p-name']}}
               </span>
            </label>
            </li>
        </ul>
        </div>

</template>